layui.use(['jquery','flow'], function () {
    var $ = layui.jquery;
    var flow = layui.flow;

    //信息流
    flow.load({
        elem: '.blog-main-left', //指定列表容器
        isAuto: true,
        end: '没有更多了',
        mb: 200,
        done: function (page, next) {
            var pages;  //总页数
            var lis = [];   //html
            $.ajax({
                type: 'get',
                url: '/api/article/list',
                contentType: 'application/json',
                data: { page: page, size: 10 },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0 ) {
                        setTimeout(function () {
                            $.each(res.data.data, function (index,item) {
                                var binds = '';
                                $.each(item.tag_bind, function(index1,item1) {
                                    binds += '<a href="'+item1.to_tag.id+'">'+item1.to_tag.name+'</a>';
                                });
                                var str = '<div class="article shadow"> ' +
                                    '<div class="article-left"> ' +
                                    '<img src="'+item.cover+'" alt="'+item.title+'" /> ' +
                                    '</div> ' +
                                    '<div class="article-right"> ' +
                                    '<div class="article-title"> ' +
                                    '<a href="/web/articles/detail/'+item.id+'">'+item.title+'</a> ' +
                                    '</div> ' +
                                    '<div class="article-abstract"> '+item.description+' </div> ' +
                                    '</div> ' +
                                    '<div class="clear"></div> ' +
                                    '<div class="article-footer"> ' +
                                    '<span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;'+item.created_at+'</span> ' +
                                    '<span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;'+item.author+'</span> ' +
                                    '<span><i class="fa fa-tag"></i>&nbsp;&nbsp;'+binds+'</span> ' +
                                    '<span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;'+item.click+'</span> ' +
                                    '<span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;'+item.comments.length+'</span> ' +
                                    '</div> </div>';
                                lis.push(str);
                            });
                            pages = res.data.last_page;
                            next(lis.join(''), page < pages);
                        },500);
                    } else {
                        layer.msg('获取数据失败', { icon: 2 });
                    }
                },
                error: function (e) {
                    layer.msg(e.responseText);
                }
            });
        }
    });

    //画canvas
    $(function () {
        DrawCanvas();
    });

    function DrawCanvas() {
        (function(main) {
            var args = {};
            window.onload = function() {
                main(args);
            };
        })(function(args) {

            'use strict';

            var Box = function(x, y, w, h, s) {
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
                this.s = s;
                this.a = Math.random() * Math.PI * 2;
                this.hue = Math.random() * 360;
            };

            Box.prototype = {
                constructor: Box,
                update: function() {
                    this.a += Math.random() * 0.5 - 0.25;
                    this.x += Math.cos(this.a) * this.s;
                    this.y += Math.sin(this.a) * this.s;
                    this.hue += 5;
                    if(this.x > WIDTH) this.x = 0;
                    else if(this.x < 0) this.x = WIDTH;
                    if(this.y > HEIGHT) this.y = 0;
                    else if(this.y < 0) this.y = HEIGHT;
                },
                render: function(ctx) {
                    ctx.save();
                    ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.a);
                    ctx.fillRect(-this.w, -this.h / 2, this.w, this.h);
                    ctx.restore();
                }
            };

            var Circle = function(x, y, tx, ty, r) {
                this.x = x;
                this.y = y;
                this.ox = x;
                this.oy = y;
                this.tx = tx;
                this.ty = ty;
                this.lx = x;
                this.ly = y;
                this.r = r;
                this.br = r;
                this.a = Math.random() * Math.PI * 2;
                this.sx = Math.random() * 0.5;
                this.sy = Math.random() * 0.5;
                this.o = Math.random() * 1;
                this.delay = Math.random() * 200;
                this.delayCtr = 0;
                this.hue = Math.random() * 360;
            };

            Circle.prototype = {
                constructor: Circle,
                update: function() {

                    if(this.delayCtr < this.delay) {
                        this.delayCtr++;
                        return;
                    }

                    this.hue += 1;
                    this.a += 0.1;

                    this.lx = this.x;
                    this.ly = this.y;

                    if(!clickToggle) {
                        this.x += (this.tx - this.x) * this.sx;
                        this.y += (this.ty - this.y) * this.sy;
                    } else {
                        this.x += (this.ox - this.x) * this.sx;
                        this.y += (this.oy - this.y) * this.sy;
                    }


                    this.r = this.br + Math.cos(this.a) * (this.br * 0.5);
                },
                render: function(ctx) {

                    ctx.save();
                    ctx.globalAlpha = this.o;
                    ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';
                    ctx.translate(this.x, this.y);
                    ctx.beginPath();
                    ctx.arc(0, 0, this.r, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.restore();

                    if(clickToggle) {
                        ctx.save();
                        ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';
                        ctx.beginPath();
                        ctx.moveTo(this.lx, this.ly);
                        ctx.lineTo(this.x, this.y);
                        ctx.stroke();
                        ctx.restore();
                    }


                }
            };

            var txtCanvas = document.createElement('canvas');
            var txtCtx = txtCanvas.getContext('2d');

            var c = document.getElementById('c');
            var ctx = c.getContext('2d');

            var WIDTH = c.width = window.innerWidth;
            var HEIGHT = c.height = window.innerHeight * 2/7;
            var imgData = null;
            var idx = null;
            var skip = 4;
            var circles = [];
            var circle = null;
            var a = null;
            var clickToggle = false;
            var boxList = [];
            var box = null;
            var theTxt = 'B L O G';
            var theBtn = 'CLICK TO TOGGLE'; // CLICK TO TOGGLE

            txtCanvas.width = WIDTH;
            txtCanvas.height = HEIGHT;

            txtCtx.font = 'bold 100px Sans-serif';
            txtCtx.textAlign = 'center';
            txtCtx.baseline = 'middle';
            txtCtx.fillText(theTxt, WIDTH / 2, HEIGHT / 2);

            ctx.font = 'bold 12px Monospace';
            ctx.textAlign = 'center';
            ctx.baseline = 'middle';

            imgData = txtCtx.getImageData(0, 0, WIDTH, HEIGHT).data;

            for(var y = 0; y < HEIGHT; y += skip) {
                for(var x = 0; x < WIDTH; x += skip) {
                    idx = (x + y * WIDTH) * 4 - 1;
                    if(imgData[idx] > 0) {
                        a = Math.PI * 2 * Math.random();
                        circle = new Circle(
                            WIDTH / 2 + Math.cos(a) * WIDTH,
                            HEIGHT / 2 + Math.sin(a) * WIDTH,
                            x,
                            y,
                            Math.random() * 4
                        );
                        circles.push(circle);
                    }
                }
            }

            for(var b = 0; b < 10; b++) {
                box = new Box(
                    WIDTH * Math.random(),
                    HEIGHT * Math.random(),
                    5,
                    2,
                    5 + Math.random() * 5
                );
                boxList.push(box);
            }


            c.addEventListener('click', function(e) {
                clickToggle = !clickToggle;
            });

            requestAnimationFrame(function loop() {
                requestAnimationFrame(loop);

                ctx.globalCompositeOperation = 'source-over';
                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
                ctx.fillRect(0, 0, WIDTH, HEIGHT);

                ctx.fillStyle = 'gray';
                ctx.fillText(theBtn, WIDTH / 2, HEIGHT / 2 + 80);

                ctx.globalCompositeOperation = 'lighter';

                for(var i = 0, len = circles.length; i < len; i++) {
                    circle = circles[i];
                    circle.update();
                    circle.render(ctx);
                }

                for(var j = 0; j < boxList.length; j++) {
                    box = boxList[j];
                    box.update();
                    box.render(ctx);
                }

            });

        });
    }

});
